<template>
  <!--  累计销售额组件开发-->
  <common-card
    title="中评数"
    :value="itemData.neutralComments"
    content="指南说明"
  >
    <!--    编辑卡槽1-->
    <template>
      <div class="compare-wrapper">
        <!--          上三角形-->
        <div class="compare">
          <span>同比</span>
          <span class="emphasis">{{ itemData.neutralCommentsYoy }}%</span>

          <!-- <div class="increase" /> -->
        </div>
        <div class="compare">
          <span>环比</span>
          <span class="emphasis">{{ itemData.neutralCommentsChain }}%</span>
          <!--          下三角形-->
          <!-- <div class="decrease" /> -->
        </div>
      </div>
    </template>
    <!--    编辑卡槽footer-->
    <template v-slot:footer>
      <div class="compare">
        <span>中评率</span>
        <span class="emphasis">{{ itemData.neutralRate }}%</span>
      </div>
    </template>
  </common-card>
</template>
  
<script>
import commonCardMixin from "@/mixins/commonCardMixin";

export default {
  // 应用公共样式
  mixins: [commonCardMixin],
  props: {
    itemData: {
      type: Object,
      default: () => {},
    },
  },
};
</script>
  
<style lang="scss" scoped>
.compare-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  /*垂直居中*/
  justify-content: center;

  .compare {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    /*文字大小*/
    //background: yellow;
    margin-top: 3px;
    color: #666;
  }
}
</style>
  
  